<template>
  <div class="step_content">
    <a-form :form="form">
      <div class="step_header">身份验证</div>
      <div class="step_number">向手机+86 {{ encryptNumber }}发送验证码</div>
      <div class="captcha_input">
        <a-form-item>
          <a-input
            v-decorator="['captcha', { rules: [{ required: true, message: '请输入验证码' }] }]"
            type="text"
            placeholder="输入手机验证码"
            class="verification"
            autocomplete="off"
          >
          </a-input>
        </a-form-item>
        <a-button
          type="primary"
          class="captcha_get"
          :disabled="state.smsSendBtn"
          @click.stop.prevent="getCaptcha"
          v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
          >获取验证码</a-button
        >
      </div>
      <div>
        <a-button type="primary" class="button_center" @click="nextStep">下一步</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
import { getSmsCaptcha, checkMoblieCaptcha } from '@/api/login'
export default {
  name: 'StepPhone2',
  props: {
    phoneNumber: {
      type: String,
      default: () => null
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false
      }
    }
  },
  computed: {
    encryptNumber() {
      const phoneNumber = this.phoneNumber
      if (phoneNumber) {
        return phoneNumber.substr(0, 3) + ' **** ' + phoneNumber.substr(7)
      }
      return ''
    }
  },
  methods: {
    nextStep() {
      const {
        form: { validateFields }
      } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        if (!err) {
          const params = {}
          params.captcha = values.captcha || null
          params.mobile = this.phoneNumber || null
          checkMoblieCaptcha(params)
            .then(res => {
              if (res) {
                this.$emit('nextStep')
              }
            })
            .catch(function(error) {
              this.$error('验证码错误', error)
            })
        }
      })
    },
    // 获取手机验证码
    getCaptcha(e) {
      e.preventDefault()
      const { state, $message, $notification } = this

      if (this.phoneNumber) {
        state.smsSendBtn = true
        const interval = window.setInterval(() => {
          if (state.time-- <= 0) {
            state.time = 60
            state.smsSendBtn = false
            window.clearInterval(interval)
          }
        }, 1000)

        const hide = $message.loading('验证码发送中..', 0)

        getSmsCaptcha({ mobile: this.phoneNumber })
          .then(res => {
            setTimeout(hide, 2500)
            console.log(res)
            $notification['success']({
              message: '提示',
              description: '验证码获取成功,请及时查看!',
              duration: 8
            })
          })
          .catch(err => {
            setTimeout(hide, 1)
            clearInterval(interval)
            state.time = 60
            state.smsSendBtn = false
            this.requestFailed(err)
          })
      }
    },
    requestFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../index.less';
.step_content {
  width: 420px;
  height: 333px;
  background-color: #feffff;
  box-shadow: 2px 1px 18px -2px #e0ecff;
  border-radius: 1px;
  text-align: center;
  .step_header {
    margin: 45px 112px 30px 112px;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;
  }
  .step_number {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 26px;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: #333333;
  }
  .captcha_input {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .verification {
      width: 220px;
    }
    .captcha_get {
      width: 88px;
      height: 42px;
      margin-left: 12px;
      text-align: center;
      line-height: 42px;
      background-color: #f2f5f8;
      border-radius: 2px;
      border: none;
      padding: 0;
    }
    .captcha_get:hover {
      cursor: pointer;
      color: @font-hover;
    }
  }
  .ant-input {
    height: 42px;
    padding: 0 10px;
    font-size: 14px;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .button_center {
    width: 320px;
    height: 48px;
    background-color: #33b0ed;
    border-radius: 2px;
  }
  /deep/ .ant-form-explain {
    text-align: left;
  }
}
</style>
